<template>
  <view>
    <!-- 自定义搜索组件 -->
    <my-search autoRouter
               sticky></my-search>

    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true"
            :autoplay="true"
            :interval="3000"
            :duration="1000"
            :circular="true">
      <swiper-item v-for="item in swiperList"
                   :key="item.goods_id">
        <navigator class="swiper-item"
                   :url="`/subpack/good_detail/good_detail?goods_id=${item.goods_id}`">
          <image :src="item.image_src"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 导航区域 -->
    <view class="nav">
      <image class="nav-item"
             v-for="item in navList"
             :key="item.image_src"
             :src="item.image_src"
             @click="navClick(item.name)">
      </image>
    </view>

    <!-- 楼层区域 -->
    <view class="floor">
      <view class="floor-item"
            v-for="item in floorList"
            :key="item.floor_title.name">
        <image class="floor-title"
               :src="item.floor_title.image_src"></image>
        <view class="floor-img-box">
          <navigator class="left-img-box"
                     :url="item.product_list[0].url">
            <image :src="item.product_list[0].image_src"
                   mode="scaleToFill"></image>
          </navigator>
          <view class="right-img-box">
            <navigator v-for="(item1, index1) in item.product_list"
                       :key="item1.image_src"
                       v-if="index1"
                       :url="item1.url">
              <image :src="item1.image_src"
                     mode="scaleToFill"></image>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import badgeMixin from '@/mixins/tabbar-badge.js'
  
  export default {
    mixins: [badgeMixin],
    data() {
      return {
        // 轮播图数据
        swiperList: [],
        // 导航数据
        navList: [],
        // 楼层数据
        floorList: []
      }
    },
    mounted() {
      this.getSwiperList()
      this.getNavList()
      this.getFloorList()
    },
    methods: {
      /**
       * 获取轮播图数据
       */
      getSwiperList() {
        return uni.$http.get('home/swiperdata').then(res => {
          let data = res.data
          if (data.meta.status === 200)
            this.swiperList = data.message
          else
            uni.$showError()
        })
      },

      /**
       * 获取分类导航数据
       */
      getNavList() {
        return uni.$http.get('home/catitems').then(res => {
          let data = res.data
          if (data.meta.status === 200)
            this.navList = data.message
          else
            uni.$showError()
        })
      },

      /**
       * 获取楼层数据
       */
      getFloorList() {
        return uni.$http.get('home/floordata').then(res => {
          let data = res.data
          if (data.meta.status === 200) {
            data.message.forEach(item => {
              item.product_list.forEach(item1 => {
                item1.url = '/subpack/good_list/good_list?' + item1.navigator_url.split('?')[1]
              })
            })
            this.floorList = data.message
          } else
            uni.$showError()
        })
      },

      /**
       * 导航项点击事件
       */
      navClick(navItemTitle) {
        if (navItemTitle === '分类')
          uni.switchTab({
            url: '/pages/cate/cate'
          })
      }
    }
  }
</script>

<style lang="scss">
  swiper {
    height: 400rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }

  .nav {
    display: flex;
    justify-content: space-around;
    margin: 30rpx 0;

    .nav-item {
      width: 128rpx;
      height: 140rpx;
    }
  }

  .floor {
    .floor-item {
      padding: 20rpx 10rpx;

      .floor-title {
        width: 100%;
        height: 60rpx;
        display: block;
      }

      .floor-img-box {
        display: flex;
        height: 405rpx;

        .left-img-box {
          image {
            width: 240rpx;
            height: 100%;
          }
        }

        .right-img-box {
          display: flex;
          justify-content: space-around;
          align-content: space-between;
          flex-wrap: wrap;

          image {
            display: block;
            width: 240rpx;
            height: 200rpx;
          }
        }
      }
    }
  }
</style>
